<template>
  <div class="home">
    <!-- 网页头部导航 -->
    <Headers class="home__header"></Headers>

    <div class="home__content">
      <!-- 网页左边的导航 -->
      <LeftMenu class="home__content--left"></LeftMenu>

      <!-- 网页的核心内容，中间部分 -->
      <div class="home__content--right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
//  网页上面的导航
import Headers from "./Headers";

// 网页左边的导航
import LeftMenu from "./LeftMenu";

export default {
  name: "index",
  components: {
    Headers,
    LeftMenu
  }
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  .home__header {
    width: 100%;
  }
  .home__content {
    display: flex;
    height: calc(100% - 50px);
    .home__content--left {
      height: 100%;
      background: rgb(50, 64, 87);
      overflow: auto;
    }
    .home__content--right {
      width: 100%;
      flex: 1;
      box-sizing: border-box;
      overflow-y: auto;
      min-height: 320px;

      background: #fff;
      border-radius: 8px;
      margin: 24px 26px;
    }
  }
}
</style>
